<template>
	<u-popup 
		:show="isShow" 
		mode="bottom" 
		round="16" 
		safe-area-inset-bottom 
		@close="close">
		<view class="share">
			<view class="share-title">
				分享到
			</view>
			<view class="share-box">
				<view class="flex align-center">
					<button class="btn flex-sub" open-type="share">
						<image 
							class="icon" 
							src="https://h5.dhcc.wang/newprogram/livebroad/live_share_wechat.png" 
							mode=""></image>
						<view class="text">好友</view>
					</button>
					<button class="btn flex-sub" @click="saveImgDown">
						<image 
							class="icon" 
							src="https://h5.dhcc.wang/newprogram/livebroad/live_share_circle.png" 
							mode=""></image>
						<view class="text">海报</view>
					</button>
				</view>
			</view>
			<view class="share-bottom" @click="close">取消</view>
		</view>
	</u-popup>
</template>
<script>
	import { getAbouts } from '@/api/common'
	export default {
		props: {
			show: Boolean,
			image: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				poster: ''
			}
		},
		computed: {
			isShow: {
				get() {
					return this.show
				},
				set(newV) {
					// console.log(newV)
				}
			}
		},
		methods: {
			preview() {
				uni.previewImage({
					current: this.poster,
					urls: [this.poster]
				})
			},
			saveImgDown() {
				if (this.poster) {
					this.showPic()
				} else {
					getAbouts().then(res => {
						if (!res.mini_code) {
							uni.$u.toast(`还没有上传`)
							return
						}
						this.poster = res.mini_code
						this.showPic()
					})
				}
			},
			showPic() {
				this.close()
				this.preview()
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>
<style lang="scss" scoped>
	button {
		color: inherit;
		line-height: inherit;
		background: transparent;
		padding: 0;
		border-radius: 0;
		&::after {
			content: normal;
		}
	}
	.share {
		&-title {
			font-size: 30rpx;
			font-weight: 700;
			text-align: center;
			padding: 30rpx;
		}
		&-box {
			.icon {
				width: 80rpx;
				height: 80rpx;
				vertical-align: middle;
			}
		}
		&-box {
			padding: 30rpx;
			.text {
				font-size: 24rpx;
				padding-top: 20rpx;
			}
		}
		&-bottom {
			 text-align: center;
			 font-size: 26rpx;
			 padding: 30rpx;
			 color: #666;
			 border-top: 1rpx solid #f2f2f2;
		}
	}
</style>
